<!-- eslint-disable no-unused-vars -->
<script setup>
import { getHomeBanner } from '@/apis/getHome';
import { onMounted, ref } from 'vue';
const props = defineProps({
  id: {
    default: ''
  }
})
const bannerList = ref([])
let Size = ref('266px')
onMounted(async () => {
  const res = await getHomeBanner(props.id)
  bannerList.value = res.result
  if (props.id !== 1) return Size.value = '16px'
})
</script>

<template>
  <div class="home-banner" :class="{ id: id === 1 }">
    <el-carousel height="500px" :style="{ '--Size': Size }">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        {{ item.hrefUrl.split("/")[2] }}
        <router-link :to="item.hrefUrl"><img :src="item.imgUrl" :title="item.imgUrl"></router-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>



<style scoped lang='scss'>
.home-banner {
  width: 1240px;
  height: 500px;

  img {
    width: 100%;
    height: 500px;
  }
}

.id {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
}

:deep .el-carousel__arrow--left {
  left: var(--Size) !important;
}
</style>